import React, { Suspense, useCallback, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import styles from './App.module.scss';
import { Route, Switch, withRouter, RouteComponentProps } from 'react-router-dom';
import appRoute from './route/index';
import LayoutComponent from 'src/pages/Components/Layout';
import { Spin } from 'antd';
import publicRoute from 'src/route/modules/publicRoute';
import { getAuthList } from 'src/services/User';
import { setAuth } from 'src/store/btnAuth/actions';
import { setAuthMenu } from 'src/store/menu/actions';
import { setUserInfo } from 'src/store/user/actions';
import Bot from 'src/pages/Components/Bot';

function App( props: RouteComponentProps & { setAuth: Function, setAuthMenu?: Function, setUserInfo?: Function } ) {
	const { setAuth, setAuthMenu, setUserInfo } = props;
	const pathname = props.location.pathname;
	const [ userInfo, setUser ] = useState();
	const [ menu, setMenu ] = useState( [] );
	const [ isNeedAuth, setNeedAuth ] = useState( true );
	const [ biHelpDocInfo, setBiHelpDocInfo ] = useState( {} );
	const notNeedAuthPath = [ '/analyseManage/public' ];	//	不需要登录的页面路由


	const getAuth = useCallback( () => {
		const fn = async () => {
			const data = await getAuthList();
			if ( data.status === 1 ) {
				setUser( data.data.user );
				setMenu( data.data.menu );
				setUserInfo( data.data.user );
				setAuthMenu( data.data.menu );
				setBiHelpDocInfo( data.data.biHelpDocInfo );
				setAuth( data.data.btns ? data.data.btns.map( v => v.permittedAction ) : [] );
			}
		};
		fn();
	}, [ setAuth, setAuthMenu, setUserInfo, setBiHelpDocInfo ] );

	useEffect( () => {
		if ( notNeedAuthPath.some( v => pathname.indexOf( v ) > -1 ) ) {
			return setNeedAuth( false );
		}
		!userInfo && getAuth();
	}, [ getAuth, pathname, notNeedAuthPath, userInfo ] );

	return (
		<div className={ styles.App }>
			{
				isNeedAuth ? (
					<Switch>
						<LayoutComponent user={ userInfo } menu={ menu } biHelpDocInfo={biHelpDocInfo}>
							<Suspense fallback={
								<Spin
									size="large"
									style={ { top: '50%', left: '50%', position: 'absolute' } }
								></Spin>
							}
							>
								{ appRoute.map( ( { path, exact, component } ) => {
									return (
										<Route
											path={ path }
											exact={ exact ? true : false }
											component={ component }
											key={ path }
										></Route>
									);
								} ) }
							</Suspense>
						</LayoutComponent>
					</Switch>
				) : (
					<Switch>
						<Suspense fallback={
							<Spin
								size="large"
								style={ { top: '50%', left: '50%', position: 'absolute' } }
							></Spin>
						}
						>
							{ publicRoute.map( ( { path, exact, component } ) => {
								return (
									<Route
										path={ path }
										exact={ exact ? true : false }
										component={ component }
										key={ path }
									></Route>
								);
							} ) }
						</Suspense>
					</Switch>
				)
			}

			<Bot></Bot>

		</div>
	);
}

//	映射dispatch到当前组件
const mapDispatchToProps = ( dispatch ) => {
	return {
		setAuth: ( btns ) => {
			dispatch( setAuth( btns ) );
		},
		setAuthMenu: ( menu ) => {
			dispatch( setAuthMenu( menu ) );
		},
		setUserInfo: ( user ) => {
			dispatch( setUserInfo( user ) );
		}
	};
};

export default withRouter( connect( null, mapDispatchToProps )( App ) );
